<template>
  <div class="login">
    <div class="login-form">
      <!-- <h3 class="title">登录账号</h3> -->
      <!-- <el-tabs v-model="activeName" stretch>
        <el-tab-pane label="账号密码登录" name="1">
          <userPwd />
        </el-tab-pane>
        <el-tab-pane label="手机号登录" name="2">
          <phoneLogin />
        </el-tab-pane>
      </el-tabs> -->
      <userPwd />
    </div>
  </div>
  <!--  底部  -->
  <div class="el-login-footer">
    <span>{{ VERSION }}</span>
  </div>
</template>

<script setup>
import userPwd from "@/views/userPwd.vue"; //账号密码登录页面
import phoneLogin from "@/views/phoneLogin.vue"; //手机号登录页面
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from "@/store/modules/user";
// import * as THREE from '../../node_modules/three/src/Three.js'
// import { OrbitControls } from '../../node_modules/three/examples/jsm/controls/OrbitControls'
// import Geometry from './index'
// import { FontLoader } from '../../node_modules/three/examples/jsm/loaders/FontLoader'
// import { OrbitControls } from '../../node_modules/three/examples/jsm/controls/OrbitControls'
import ringTexture from "@/assets/logo/logo-03.png";
const to = () => {
  window.open("https://www.pureut.com/");
};
const VERSION = import.meta.env.VITE_APP_VERSION;
const userStore = useUserStore();
const router = useRouter();
const { proxy } = getCurrentInstance();
const loginForm = ref({
  username: "",
  password: "",
  a: "",
  b: "",
});
const activeName = ref("1");

const loginRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  // code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};

const codeUrl = ref("");
const loading = ref(false);
// 验证码开关
const captchaEnabled = ref(true);
// 注册开关
const redirect = ref(undefined);

// 账号密码登录校验
function handleLogin() {
  proxy.$refs.loginRef.validate((valid) => {
    if (valid) {
      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
      if (loginForm.value.rememberMe) {
        Cookies.set("username", loginForm.value.username, { expires: 30 });
        Cookies.set("password", encrypt(loginForm.value.password), {
          expires: 30,
        });
        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
      } else {
        // 否则移除
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("rememberMe");
      }
      userStore
        .login(loginForm.value)
        .then(() => {
          router.push({ path: redirect.value || "/" });
        })
        .catch(() => {
          loading.value = false;
          // 重新获取验证码
          if (captchaEnabled.value) {
            // getCode();
          }
        });
      // isShow.value = true
    }
  });
}

function getCode() {
  getCodeImg().then((res) => {
    captchaEnabled.value =
      res.captchaEnabled === undefined ? true : res.captchaEnabled;
    if (captchaEnabled.value) {
      codeUrl.value = "data:image/gif;base64," + res.img;
      loginForm.value.uuid = res.uuid;
    }
  });
}

function getCookie() {
  const username = Cookies.get("username");
  const password = Cookies.get("password");
  const rememberMe = Cookies.get("rememberMe");
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    password:
      password === undefined ? loginForm.value.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
  };
}

// getCode();
getCookie();
</script>

<style lang="scss" scoped>
.labelClass {
  width: 100%;
  border-bottom: 0.0625rem solid #c8c8c8;
  margin-bottom: 1.625rem;
}

.margin-bottom {
  margin-bottom: 2.75rem;
}

img {
  width: 1.75rem;
  height: 1.75rem;
}

#my-three {
  position: absolute;
  width: 100%;
  height: 100%;
}

@function pxToVw($num) {
  //100vw:当前屏幕宽度
  //375:以屏幕宽度为375px为准
  //$num:需要设定的px值
  //计算：屏幕宽度100vw为375 $num:1 转换为1px（转换精度会有细微误差）
  @return 100vw / 1024 * $num;
}

.logo {
  cursor: pointer;
}

.left {
  padding-left: 20px;
  padding-top: 20px;
  height: 100%;
  overflow: hidden;
  max-width: 1000px;
  min-width: 300px;
}

.text {
  position: relative;
  color: #ffffff;
  opacity: 0.7;
  transition: all 0.5s;
  animation: textframes 0.2s linear;
  font-size: 20px;
  left: 0;
  opacity: 1;
  word-wrap: break-word;
  max-width: 1000px;
  table-layout: fixed;
  word-wrap: break-all;
  word-break: normal;
  overflow: hidden;
  min-width: 300px;
}

.image {
  cursor: pointer;
  width: 100%;
}

.carousel {
  position: absolute;
  width: 100%;
  animation: carousel 0.3s linear;
}

.carousela {
  position: relative;
  width: 1000px;
  height: 300px;
}

@for $i from 1 through 10 {
  .text:nth-child(#{$i}) {
    animation-delay: #{$i * 0.2}s;
    animation: textframes #{$i * 0.12}s linear;
  }
}

@keyframes carousel {
  0% {
    top: -100px;
  }

  100% {
    top: 0px;
  }
}

@keyframes textframes {
  0% {
    left: -100px;
    opacity: 0;
  }

  100% {
    left: 0px;
    opacity: 1;
  }
}

.logBox {
  position: relative;
  width: 600px;
  min-width: 350px;
  height: 100%;
}

.titles {
  position: absolute;
  left: -50;
  top: 0;
}

.titles {
  position: absolute;
  left: 50;
  top: 0;
}

.login {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  // background-color: red;
  background-image: url("../assets/bglogin.jpg");
  // background: linear-gradient(to right, #23272e, #0a7ae2, #23272e);
  background-size: cover;
}

.title {
  width: 96px;
  height: 24px;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 44px;
  // margin-bottom: 33px;
}

// @keyframes login-form {
//   0% {
//     height: 2px;
//     right: -50%;
//   }
//   25% {
//     right: 0%;
//     height: 0px;
//   }
//   50% {
//   }

//   100% {
//     height: 310px;
//   }
// }

.login-form {
  // position: absolute;
  // right: 0%;
  // top: 40%;
  background: #ffffff;
  animation: login-form 1s;
  height: 15rem;
  width: 14.9375rem;
  width: 34.375rem;
  height: 27.5rem;
  overflow: hidden;
  border-radius: 8px;
  padding: 25px;

  .el-input {
    height: 40px;

    input {
      height: 40px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 40px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 40px;
  padding-left: 12px;
}

.login ::v-deep .el-input {
  width: 100% !important;
  // min-width: 128px !important;
}

.login ::v-deep .el-input__inner {
  width: 100% !important;
  // min-width: 128px !important;
}

.login ::v-deep .el-tabs__item {
  font-size: 18px !important;
  padding: 10px 0 50px !important;
  width: 120px !important;
}

.login ::v-deep .el-tabs__active-bar {
  width: 120px !important;
}

.login ::v-deep .el-tabs__nav-scroll {
  width: 50%;
  margin: 0 auto;
}
</style>